<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        table {
            width: 500px;
            margin: 100px auto;
            border-collapse: collapse;
            text-align: center;
        }

        td,
        th {
            border: 1px solid #333;
        }

        thead tr {
            height: 40px;
            background-color: #ccc;
        }
    </style>
</head>
<body>
<table cellspacing="0">
    <thead>
    <tr>
        <th>姓名</th>
        <th>科目</th>
        <th>成绩</th>
        <th>操作</th>
    </tr>
    </thead>
    <tbody>

    </tbody>
</table>
<script>
    //1.准备好数据
    var datas = [
        {
            name: 'lzc',
            subject: 'javascript',
            score: 100
        },
        {
            name: 'cp',
            subject: 'web前端',
            score: 100
        },
        {
            name: 'lc',
            subject: 'android',
            score: 100
        },
        {
            name: '嘻嘻嘻',
            subject: 'android',
            score: 100
        }
    ];
    //2.往tbody里面创建行:有几个人(通过数组的长度) 我们就创建几行
    var tbody = document.querySelector('tbody');
    for (var i = 0; i < datas.length; i++) { //外面的for循环 管行 tr
        //创建tr行
        var tr = document.createElement('tr');
        tbody.appendChild(tr);
        //行里面创建单元格 td (跟数据有关系的3个单元格)单元格的数量取决于每个对象里面的属性个数 for循环遍历对象
        for (var k in datas[i]) {//for循环管列 td
            //创建单元格
            var td = document.createElement('td');
            //把对象里面的属性值 给td
            td.innerHTML = datas[i][k];
            tr.appendChild(td);

        }
        //3.创建有删除两个字的单元格
        var td = document.createElement('td');
        td.innerHTML = "<a href='javascript:;'>删除</a>"
        tr.appendChild(td);
    }
    //4.删除操作 开始
    var a = document.querySelectorAll('a');
    console.log(a);
    for (var i = 0; i < a.length; i++) {
        a[i].onclick = function () {
            tbody.removeChild(this.parentNode.parentNode);
        }
    }

    // for (var k in obj){
    //     // k得到的是属性名
    //     // obj[k]是属性值
    // }

</script>
</body>
</html>